<template>
  <div>
    <mt-header title="充值" fixed>
      <router-link to="/userList" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="pay">
      <p>{{ user.nickname }}</p>
      <mt-field label="充值金额" placeholder="请输入充值金额" type="number" v-model="money"/>
      <mt-button type="primary" size="large" @click.native="getInfo">充值</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pay',
  data () {
    return {
      url: {
        info: '/recharge/order/confirm/info',
        pay: '/recharge/order/pay/info'
      },
      user: {},
      money: null
    }
  },
  methods: {
    getInfo () {
      let params = {
        userId: this.user.id,
        rechargeAmount: this.money * 100
      }
      this.$ajax.post(this.url.info, params)
        .then(res => {
          if (res.data.success) {
            this.$MessageBox.confirm(`<p>确认充值</p><img src="${res.data.data.userInfo.profilePhotoPath}" width="40">${res.data.data.userInfo.nickname}<p>金额：${res.data.data.payment / 100}</p>`)
              .then(action => {
                this.payInfo(res.data.data.token)
              })
              .catch(() => {
              })
          }
        })
    },
    payInfo (token) {
      this.$ajax.post(this.url.pay, token)
        .then(res => {
          if (res.data.success) {
            let _self = this
            function onBridgeReady () {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  'appId': res.data.data.appid,
                  'timeStamp': res.data.data.timeStamp,
                  'nonceStr': res.data.data.nonceStr,
                  'package': res.data.data.prepayId,
                  'signType': res.data.data.signType,
                  'paySign': res.data.data.paySign
                },
                function (re) {
                  alert(JSON.stringify(re))
                  if (re.err_msg == 'get_brand_wcpay_request:ok') {
                    alert(JSON.stringify(re))
                    _self.$router.push({path: '/result', query: {orderNumber: res.data.data.orderNumber}})
                  } else {
                    _self.$router.push({path: '/result'})
                  }
                })
            }
            if (typeof WeixinJSBridge === 'undefined') {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
              }
            } else {
              onBridgeReady()
            }
          }
        })
    }
  },
  created () {
    this.user.id = this.$route.query.id
    this.user.nickname = this.$route.query.nickname
  }
}
</script>

<style scoped>
  .pay{
    margin-top: 40px;
    padding: 10px;
  }
</style>
